<template>
  <div class="page_divider">
    <div style="width: 100%; background-color: white">
      <a-radio-group
        style="position: fixed; top: 0; z-index: 100"
        v-model="position"
        type="button"
        size="large"
      >
        <a-radio @click="goQuestion" value="top">题库</a-radio>
        <a-radio @click="isSearchMySubmit = true">我的提交</a-radio>
        <a-radio @click="returnNextPage">返回</a-radio>
      </a-radio-group>
    </div>
    <a-split
      :style="{
        height: '100%',
        width: '100%',
        border: '1px solid #b1d5c8',
      }"
    >
      <template v-if="!isSearchMySubmit" #first>
        <a-typography-paragraph>
          <WatchQuestion class="content" />
        </a-typography-paragraph>
      </template>
      <template v-else #first>
        <a-typography-paragraph>
          <MySubmitView :watchSubmit="watchSubmit" />
        </a-typography-paragraph>
      </template>
      <template v-if="!isSearchMySubmit" #second>
        <div style="height: 100%">
          <a-split direction="vertical" :style="{ height: '100%' }">
            <template #first>
              <a-typography-paragraph style="height: 100%">
                <div style="height: 100%">
                  <CodeEditer :getCode="getCode" />
                </div>
              </a-typography-paragraph>
            </template>
            <template #second>
              <a-spin
                :loading="loading"
                style="width: 100%; height: 100%"
                tip="这可能需要消耗一些时间..."
              >
                <a-card title="运行结果" style="width: 100%; height: 100%">
                  <div
                    v-if="!questionSubmitVo.judgeInfo?.message"
                    style="
                      width: 100%;
                      height: 100%;
                      background-color: white;
                      border-radius: 2ch;
                      padding: 10px;
                    "
                  >
                    <a-typography-title :heading="4"
                      >运行结果:{{ questionSubmitVo.codeStatus }}
                    </a-typography-title>
                    <div>
                      <a-typography-text>
                        内存消耗:
                        {{ limit.memory }}kb
                      </a-typography-text>
                    </div>
                    <div>
                      <a-typography-text>
                        时间消耗:
                        {{ limit.time }}ms
                      </a-typography-text>
                    </div>
                  </div>
                  <div
                    v-else
                    style="
                      width: 100%;
                      height: 100%;
                      background-color: white;
                      border-radius: 2ch;
                      padding: 10px;
                    "
                  >
                    <a-typography-title :heading="4"
                      >运行结果:{{ questionSubmitVo.codeStatus }}
                    </a-typography-title>
                    <a-typography-text>
                      {{ questionSubmitVo.judgeInfo?.message }}
                    </a-typography-text>
                  </div>
                </a-card>
              </a-spin>
            </template>
          </a-split>
        </div>
      </template>
      <template v-else #second>
        <div style="height: 100%">
          <SubmitPage />
        </div>
      </template>
    </a-split>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import WatchQuestion from "@/components/question/WatchQuestion.vue";
import CodeEditer from "@/components/question/CodeEditer.vue";
import { useQuestion } from "@/store/question";
import { storeToRefs } from "pinia";
import {
  QuestionSubmitAddRequest,
  QuestionSubmitControllerService,
  QuestionSubmitQueryRequest,
  QuestionSubmitVO,
} from "../../../generated";
import message from "@arco-design/web-vue/es/message";
import MySubmitView from "@/views/quesstion/MySubmitView.vue";
import SubmitPage from "@/components/question/SubmitPage.vue";

let position = ref("");

let question = useQuestion();

let { questionId, submit } = storeToRefs(question);

let router = useRouter();

let isSearchMySubmit = ref(false);

const questionSubmit = reactive({
  code: "",
  language: "",
  questionId: 0,
} as QuestionSubmitAddRequest);

const limit = reactive({
  memory: 0,
  message: "",
  time: 0,
});

let loading = ref(false);
let questionSubmitVo = reactive({
  code: "",
  createTime: "",
  id: 0,
  judgeInfo: {
    memory: 0,
    message: "",
    time: 0,
  },
  language: "",
  questionId: 0,
  status: "",
  updateTime: "",
  userId: 0,
} as QuestionSubmitVO);
const getCode = async (value: string, language: string) => {
  questionSubmit.code = value;
  questionSubmit.language = language;
  questionSubmit.questionId = questionId.value;
  loading.value = true;
  const cancelablePromise =
    await QuestionSubmitControllerService.doQuestionSubmitUsingPost1(
      questionSubmit
    );
  loading.value = false;
  if (cancelablePromise.code == 0) {
    message.success("代码提交成功,判题已结束");
    Object.assign(questionSubmitVo, cancelablePromise.data);
    Object.assign(limit, cancelablePromise.data.judgeInfo);
  } else {
    message.success("代码提交失败,判题结束");
  }
};

const goQuestion = () => {
  router.push("/");
};

const returnNextPage = () => {
  if (isSearchMySubmit.value) {
    isSearchMySubmit.value = false;
  } else {
    router.push("/");
  }
};

const watchSubmit = (record: QuestionSubmitVO) => {
  submit.value = record;
};
</script>
<style scoped>
.page_divider {
  position: fixed;
  background-color: #f5f5f5;
  height: 95%;
  width: 100%;
  bottom: 0;
}

.content {
  position: relative;
  top: 20px;
  left: 10px;
  right: 10px;
}
</style>
